<template>
  <a-modal title="查看" :visible="visible" :footer="null" width="70%" @cancel="visible = false">
    <div class="itemContent">
        <a-button type="primary" @click="handleDetail" icon="plus">新增</a-button>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
      </a-table>
    </div>
    <a-modal
      title="添加"
      :visible="addVisible"
      :confirm-loading="addConfirmLoading"
      @ok="addHandleOk"
      @cancel="addVisible = false"
    >
      <a-form :form="form">
        <a-row>
          <a-col :span="24">
            <a-form-item label="处理意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-decorator="['content']" rows="4" placeholder="请输入处理意见" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script>
import { getOrderList, getAddList } from '@/api/order'
import pick from 'lodash.pick'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      addVisible: false,
      addConfirmLoading: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '处理人',
          width: 200,
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '处理意见',
          align: 'center',
          dataIndex: 'content',
        },
        {
          title: '处理时间',
          align: 'center',
          width: 100,
          dataIndex: 'createTime',
        },
      ],
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      /* table加载状态 */
      loading: false,
      itemList: {},
    }
  },
  methods: {
    handleDetail() {
      this.addVisible = true
    },
    async add(e) {
      this.itemList = e
      await this.getOrderList()
      this.visible = true
    },
    async getOrderList() {
      const params = {
        orderId: this.itemList.id,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      }
      const { code, message, result } = await getOrderList(params)
      if (code != 200) {
        return this.$message.error(message)
      }
      this.dataSource = result.records
      this.ipagination.total = result.total
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      // if (Object.keys(sorter).length > 0) {
      //   this.isorter.column = sorter.field;
      //   this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      // }
      this.ipagination = pagination
      this.getOrderList()
    },
    async addHandleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          values.orderId = this.itemList.id
          let formData = Object.assign(this.model, values)
          getAddList(formData)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                this.addVisible = false
                that.getOrderList()
                this.addList()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {})
        }
      })
    },
    addList() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'content'))
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
  },
}
</script>

<style lang="css" scoped>
.itemContent {
  width: 100%;
  margin-bottom: 20px;
}
</style>